<template>
    <div>
      <table class="table tablesorter" :class="tableClass">
        <thead :class="theadClasses">
          <tr>
            <slot name="columns">
              <th v-for="column in columns" :key="column">{{ column }}</th>
            </slot>
          </tr>
        </thead>
        
        <tbody :class="tbodyClasses">
          <tr v-for="(item, index) in paginatedData" :key="index">
            <slot :row="item">
              <td v-for="(column, colIndex) in columns" :key="colIndex" v-if="hasValue(item, column)">
                {{ itemValue(item, column) }}
              </td>
            </slot>
          </tr>
        </tbody>
      </table>
  
     
    </div>
  </template>
  
  <script>
  export default {
    name: "TransformTable",
    props: {
      tableClass: {
        type: String,
        default: "",
      },
      theadClasses: {
        type: String,
        default: "",
      },
      tbodyClasses: {
        type: String,
        default: "",
      },
      data: {
        type: Array,
        default: () => [],
      },
      columns: {
        type: Array,
        default: () => [],
      },
      itemsPerPage: {
        type: Number,
        default: 5,
      },
    },
    data() {
      return {
        currentPage: 1,
      };
    },
    computed: {
      totalPages() {
        return Math.ceil(this.data.length / this.itemsPerPage);
      },
      paginatedData() {
        const start = (this.currentPage - 1) * this.itemsPerPage;
        return this.data.slice(start, start + this.itemsPerPage);
      },
    },
    methods: {
      hasValue(item, column) {
        return item[column.toLowerCase()] !== "undefined";
      },
      itemValue(item, column) {
        return item[column.toLowerCase()];
      },
      prevPage() {
        if (this.currentPage > 1) {
          this.currentPage--;
        }
      },
      nextPage() {
        if (this.currentPage < this.totalPages) {
          this.currentPage++;
        }
      },
    },
  };
  </script>
  
  <style>
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
  }
  .pagination button {
    margin: 0 5px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    background: #f8f9fa;
    cursor: pointer;
  }
  .pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  </style>